<template>
    <div class="container1">
        <top></top>
        <div class="initCharge">
            <div class="initchargeBtn">
                <div class="chargeBtnItems chongzhi" @click="goRecharge">
                    <div class="chargeBtnItemsIcon">
                        <i class="iconfont icon-chongzhi"></i>
                    </div>
                    充值
                </div>
                <div class="chargeBtnItems jiaofei" @click="goPayment">
                    <div class="chargeBtnItemsIcon">
                        <i class="iconfont icon-icon1460345266177"></i>
                    </div>
                    缴费
                </div>
            </div>
            <div class="cancelBtn">
                <div class="swingCard" @click="cancelRecharge">取&nbsp;消</div>
            </div>
            <div class="footer">
                若需要帮助，请联系志愿者或医导人员
            </div>
        </div>
    </div>
</template>
<script>
import logoImg from "../../assets/img/logo_img.png";
import top from "../../components/top";
export default {
    name: 'initial',
    components: {
        top,
    },
    data () {
        return {
            logoImg:logoImg,
        }
    },
    methods:{
        
        goRecharge(){
            this.$router.push({
                path:`/recharge`
            })
        },
        goPayment(){
            this.$router.push({
                path:`/payment`
            })
        },
        cancelRecharge(){
            this.$router.push({
                path:`/`
            })
        }
    }
}
</script>
<style>
.container1 {
    height: 100%;
    width: 100%;
}
.indexContent {
    position: absolute;
    width: 100%;
    margin-top: 15%;
    text-align: center;
    color: #36c3ca;
}
.indexContentTitle {
    font-size: 50px;
}
.indexContentClick {
    font-size: 35px;
    margin-top: 5px;
}
.indexBtn {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 30%;
}
.swingCard {
    margin: 0 auto;
    height: 50px;
    width: 120px;
    display: flex;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    background-color: #36c3ca;
    color: #ffffff;
    border-radius: 5px;
}
.initCharge {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/img/initial_page_bg.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    padding-top: 100px;
    text-align: center;
}
.initchargeBtn {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-items: center;
    align-items: center;
    color: #ffffff;
}
.chargeBtnItems {
    width: 40%;
    height: 240px;
    font-size: 40px;
}
.chongzhi {
    margin-right: 10%;
    background-color: #0e9007;
}
.jiaofei {
    margin-left: 10%;
    background-color: #ffa600;
}
.cancelBtn {
    position: relative;
    margin-top: 50px;
}
.footer {
    font-size: 18px;
    position: fixed;
    width: 50%;
    margin-left: 25%;
    text-align: center;
    bottom: 10px;
}
.icon-icon1460345266177, .icon-chongzhi {
    font-size: 90px !important;
}
.chargeBtnItemsIcon {
    margin: 30px 0 20px 0;
}
</style>

